import 'package:flutter/material.dart';

class MyCustomScrollview extends StatelessWidget {
  const MyCustomScrollview({super.key});

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      // 类似于其它组件中的children属性
      slivers: [
        // 1. 轮播图
        SliverToBoxAdapter(
          child: Container(
            alignment: Alignment.center,
            height: 200,
            color: Colors.red,
            child: const Text('轮播图'),
          ),
        ),
        // 2. 间距
        SliverToBoxAdapter(
          child: Container(
            height: 10,
            color: Colors.white,
          ),
        ),
        // 3. 宫格布局
        SliverGrid.builder(
            gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 120,
              mainAxisSpacing: 10,
              crossAxisSpacing: 10,
              childAspectRatio: 1,
            ),
            itemBuilder: (context, index) {
              return Container(
                alignment: Alignment.center,
                height: 100,
                color: Colors.blue,
                child: Text('宫格 $index'),
              );
            },
            itemCount: 6),
        // 4. 间距
        SliverToBoxAdapter(
          child: Container(
            height: 10,
            color: Colors.white,
          ),
        ),
        // 5. 列表
        SliverList.separated(
          itemCount: 10,
          itemBuilder: (context, index) {
            return Container(
              height: 120,
              color: Colors.green,
              child: Text('列表 $index'),
            );
          },
          separatorBuilder: (context, index) {
            return Container(
              margin: const EdgeInsets.symmetric(
                horizontal: 10,
              ),
              height: 5,
              decoration: const BoxDecoration(
                  // color: Colors.red,
                  ),
              child: const Divider(height: 1, color: Colors.white),
            );
          },
        )
      ],
    );
  }
}
